<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>演示：转换</title>

        <style type="text/css">

            /*类选择器*/
            .myspan{
                border: red 1px solid;
                color: blue;
                font-size: 40px;

                /*转换*/
                display: block; /*block : 独占一行*/

                               /*inline :  共享一行 */
            }


            div{
                border: blue 1px double;

                color: black;

                display: inline;
            }

        </style>
    </head>
    <body>

        <!--把行内元素 ， 转换为： 块元素
            把共享一行的，变为独占一行
        -->

        <span class="myspan">黑马</span>
        <span class="myspan">程序员</span>


        <div>传智</div>
        <div>播客</div>

    </body>
</html>